Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS][HTML] Jak ułożyć divy tak jak chcę? :<
Flapper
post
Post #1





Grupa: Zarejestrowani
Postów: 56
Pomógł: 0
Dołączył: 10.04.2007
Skąd: znienacka.

Ostrzeżenie: (0%)
-----

No właśnie próbowałem różnych metod ustawiania ale nijak mi nie wychodzi jak chcę...
Mam taki arkusz:
Kod
html, body {
    background-color: #000000;
    color: #18ff00;
    margin: 0;
    padding: 0;
    font-family: System, Terminal;
}

#top {
    width: 1007px;
}

#top1 {
    position: relative;
    float: left;
    background: url(images/1.gif);
    width: 194px;
    height: 216px;
    overflow: hidden;
}
#top2 {
    position: relative;
    background: url(images/2.gif);
    width: 588px;
    height: 216px;
    overflow: hidden;
}
#top3 {
    position: relative;
    background: url(images/3.gif);
    width: 225px;
    height: 716px;
    overflow: hidden;
}

#mid1 {
    position: relative;
    float: left;
    background: url(images/4.gif);
    width: 194px;
    height: 500px;
    overflow: hidden;
}

#mid2 {
    position: relative;
    background: url(images/5.gif);
    width: 588px;
    height: 500px;
    overflow: hidden;
}

#stopka {
    position: relative;
    background: url(images/6.gif);
    width: 1007px;
    height: 39px;
    overflow: hidden;
}


I chciałbym żeby wyglądało to mniej więcej tak:
top1 top2 top3
mid1 mid2 top3
stopka stopka

przy czym te podwójne top3 i stopki mają być pojedynczymi divami.
I nie mam pojęcia jak te divy poukładać w HTML'u i co im w stylu wpisać żeby się tak ułożyło.
Męczę to od wczoraj ale samemu mi się to chyba nie uda. (IMG:http://forum.php.pl/style_emoticons/default/sad.gif) Liczę na waszą pomoc, z góry dzięki.

Ten post edytował Flapper 27.04.2008, 21:27:28
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 4)
krzywy36
post
Post #2





Grupa: Zarejestrowani
Postów: 370
Pomógł: 43
Dołączył: 1.12.2007
Skąd: Kędzierzyn Koźle

Ostrzeżenie: (0%)
-----

Może nie najlepszy sposób, ale na szybko pisane ;] no i chciałeś każdy div osobno:
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <title>tytuł</title>
  4. <link rel="stylesheet" href="style.css" type="text/css">
  5. </head>
  6. <body>
  7. <div id="top1">top1</div>
  8. <div id="top2">top2</div>
  9. <div id="top3">top3</div>
  10. <div class="clear"></div>
  11. <div id="mid1">mid1</div>
  12. <div id="mid2">mid2</div>
  13. <div id="top3-2">top3-2</div>
  14. <div class="clear"></div>
  15. <div id="stopka1">stopka1</div>
  16. <div id="stopka2">stopka2</div>
  17. </body>
  18. </html>
[HTML] pobierz, plaintext


style.css
[HTML] pobierz, plaintext 
  1. #top1
  2. {
  3.     float: left;
  4. }
  5. #top2
  6. {
  7.     float: left;
  8. }
  9. #top3
  10. {
  11.     float: left;
  12. }
  13. #mid1
  14. {
  15.     float: left;
  16. }
  17. #mid2
  18. {
  19.     float: left;
  20. }
  21. #top3-2
  22. {
  23.     float: left;
  24. }
  25. #stopka1
  26. {
  27.     float: left;
  28. }
  29. #stopka2
  30. {
  31.     float: left;
  32. }
  33. .clear
  34. {
  35.     clear: both;
  36. }
[HTML] pobierz, plaintext


A jak chcesz ładniej to sobie zrób 3 nowe divy i pogrupuj odpowiednio: top1 top2 top3 - mid1 mid2 top3-2 - stopka1 stopka2 i wtedy bedzie Ci łatwiej to zrobić...

Ten post edytował krzywy36 28.04.2008, 08:26:23
Go to the top of the page
+Quote Post
Flapper
post
Post #3





Grupa: Zarejestrowani
Postów: 56
Pomógł: 0
Dołączył: 10.04.2007
Skąd: znienacka.

Ostrzeżenie: (0%)
-----

Tyle tylko że top3 i stopka napisałem dwa razy ze względu na rozmiar. <; to mają być pojedyncze divy.
Go to the top of the page
+Quote Post
batman
post
Post #4





Grupa: Moderatorzy
Postów: 2 921
Pomógł: 269
Dołączył: 11.08.2005
Skąd: 127.0.0.1
Wersja 1:
[HTML] pobierz, plaintext 
  1. <style>
  2.   #main div {
  3.     border: 1px solid red;
  4.   }
  5.  
  6.   #center, #right {
  7.     float: left;
  8.   }
  9.  
  10.   #footer {
  11.     clear: left;
  12.   }
  13. </style>
  14.  
  15.     <div id="main">
  16.         <div id="center">
  17.             <div id="top">aaaaa</div>
  18.             <div id="middle">bbbbb</div>
  19.         </div>
  20.         <div id="right">ccccc</div>
  21.         <div id="footer">ddddd</div>
  22.     </div>
[HTML] pobierz, plaintext


Wersja 2:
Ten sam kod HTML.
[HTML] pobierz, plaintext 
  1. <style>
  2.   <style>
  3.   #main div {
  4.     border: 1px solid red;
  5.   }
  6.  
  7.   #center {
  8.     float: left;
  9.     width: 500px;
  10.   }
  11.  
  12.   #main #right {
  13.     margin-left: 500px;
  14.   }
  15.  
  16.   #footer {
  17.     clear: left;
  18.   }
  19.   </style>
  20. </style>
[HTML] pobierz, plaintext


Oczywiście musisz usunąć obramowanie oraz ustawić odpowiednią szerokość div-ów.
A jeśli chcesz uzyskać efekt, że div "top3" będzie rozszerzał się razem z div-ami "top" i "middle", to napisz. Coś się wymyśli (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)
Go to the top of the page
+Quote Post
Flapper
post
Post #5





Grupa: Zarejestrowani
Postów: 56
Pomógł: 0
Dołączył: 10.04.2007
Skąd: znienacka.

Ostrzeżenie: (0%)
-----

Dzięki wielkie. <;
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 22.08.2025 - 18:43
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn